<template>
	<view class="inspection-entry-page">
		<!-- 老人信息部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-indicator"></view>
				<text class="section-title">老人信息</text>
			</view>
			
			<view class="form-item" @tap="selectElderly">
				<text class="form-label">巡检对象</text>
				<view class="form-select">
					<text class="select-text" :class="{ placeholder: !selectedElderly }">
						{{ selectedElderly ? selectedElderly.name : '请选择老人' }}
					</text>
					<text class="select-arrow">></text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">性别</text>
				<text class="form-value">{{ selectedElderly ? selectedElderly.gender : '-' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">年纪</text>
				<text class="form-value">{{ selectedElderly ? selectedElderly.age : '-' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">巡检时间</text>
				<text class="form-value">{{ inspectionTime }}</text>
			</view>
		</view>

		<!-- 活动信息部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-indicator"></view>
				<text class="section-title">活动信息</text>
			</view>
			
			<view class="form-item" @tap="selectTask">
				<text class="form-label">巡检任务</text>
				<view class="form-select">
					<text class="select-text" :class="{ placeholder: !selectedTask }">
						{{ selectedTask || '请选择任务' }}
					</text>
					<text class="select-arrow">></text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">巡检人</text>
				<text class="form-value">{{ inspector }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">巡检描述</text>
				<textarea class="form-textarea" v-model="description" placeholder="请输入备注信息" />
			</view>
		</view>

		<!-- 确认录入按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @tap="submitEntry">确认录入</button>
		</view>

		<!-- 老人选择弹窗 -->
		<view class="picker-modal" v-if="showElderlyPicker" @tap="closeElderlyPicker">
			<view class="picker-content" @tap.stop>
				<view class="picker-header">
					<text class="picker-title">选择老人</text>
					<view class="close-btn" @tap="closeElderlyPicker">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="picker-list">
					<view 
						class="picker-item" 
						v-for="(elderly, index) in elderlyList" 
						:key="elderly.id"
						@tap="selectElderlyItem(elderly)"
					>
						<text class="elderly-name">{{ elderly.name }}</text>
						<text class="elderly-info">{{ elderly.gender }} · {{ elderly.age }}岁</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 巡检任务选择弹窗 -->
		<view class="picker-modal" v-if="showTaskPicker" @tap="closeTaskPicker">
			<view class="picker-content" @tap.stop>
				<view class="picker-header">
					<text class="picker-title">选择任务</text>
					<view class="close-btn" @tap="closeTaskPicker">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="picker-list">
					<view 
						class="picker-item" 
						v-for="(task, index) in taskList" 
						:key="index"
						@tap="selectTaskItem(task)"
					>
						<text class="task-name">{{ task }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedElderly: null,
			selectedTask: '',
			inspectionTime: '',
			inspector: '王大锤',
			description: '',
			showElderlyPicker: false,
			showTaskPicker: false,
			elderlyList: [
				{
					id: 1,
					name: '陶玉成',
					gender: '男',
					age: '48'
				},
				{
					id: 2,
					name: '李奶奶',
					gender: '女',
					age: '78'
				},
				{
					id: 3,
					name: '王爷爷',
					gender: '男',
					age: '82'
				},
				{
					id: 4,
					name: '张奶奶',
					gender: '女',
					age: '75'
				}
			],
			taskList: [
				'健康检查',
				'安全检查',
				'房间巡视',
				'生活用品检查',
				'药品管理检查',
				'设备检查',
				'环境卫生检查',
				'紧急情况检查'
			]
		}
	},
	onLoad() {
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: '巡检录入'
		});
		
		// 初始化巡检时间为当前时间
		this.initInspectionTime();
	},
	methods: {
		// 初始化巡检时间
		initInspectionTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			
			this.inspectionTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},

		// 选择老人
		selectElderly() {
			this.showElderlyPicker = true;
		},

		// 关闭老人选择弹窗
		closeElderlyPicker() {
			this.showElderlyPicker = false;
		},

		// 选择老人项目
		selectElderlyItem(elderly) {
			this.selectedElderly = elderly;
			this.closeElderlyPicker();
		},

		// 选择任务
		selectTask() {
			this.showTaskPicker = true;
		},

		// 关闭任务选择弹窗
		closeTaskPicker() {
			this.showTaskPicker = false;
		},

		// 选择任务项目
		selectTaskItem(task) {
			this.selectedTask = task;
			this.closeTaskPicker();
		},

		// 提交录入
		submitEntry() {
			// 验证必填项
			if (!this.selectedElderly) {
				uni.showToast({
					title: '请选择巡检对象',
					icon: 'none'
				});
				return;
			}

			if (!this.selectedTask) {
				uni.showToast({
					title: '请选择巡检任务',
					icon: 'none'
				});
				return;
			}

			if (!this.description.trim()) {
				uni.showToast({
					title: '请填写巡检描述',
					icon: 'none'
				});
				return;
			}

			// 显示确认对话框
			uni.showModal({
				title: '确认录入',
				content: `确认为${this.selectedElderly.name}录入${this.selectedTask}巡检？`,
				success: (res) => {
					if (res.confirm) {
						// 这里可以调用API提交数据
						uni.showToast({
							title: '录入成功',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.inspection-entry-page {
	min-height: 100vh;
	background: #F8F8F8;
	padding: 20rpx;
}

.section {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-indicator {
	width: 6rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #FF4856 0%, #FF6F1C 100%);
	border-radius: 3rpx;
	margin-right: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 28rpx;
	color: #666666;
	min-width: 140rpx;
}

.form-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	text-align: right;
}

.form-select {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.select-text {
	font-size: 28rpx;
	color: #333333;
	margin-right: 12rpx;
}

.select-text.placeholder {
	color: #999999;
}

.select-arrow {
	font-size: 24rpx;
	color: #999999;
	transform: rotate(0deg);
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	font-size: 28rpx;
	color: #333333;
	border: 1rpx solid #E0E0E0;
	border-radius: 8rpx;
	padding: 16rpx;
	box-sizing: border-box;
	resize: none;
	background: #FAFAFA;
	margin-top: 16rpx;
}

.submit-section {
	padding: 40rpx 20rpx;
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #FF4856 0%, #FF6F1C 100%);
	border-radius: 44rpx;
	border: none;
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 72, 86, 0.3);
}

.submit-btn:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 12rpx rgba(255, 72, 86, 0.3);
}

/* 选择弹窗样式 */
.picker-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
}

.picker-content {
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	width: 100%;
	max-height: 60vh;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.15);
	animation: slideUp 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	border-bottom: 1rpx solid #E0E0E0;
}

.picker-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-icon {
	font-size: 48rpx;
	color: #999999;
}

.picker-list {
	flex: 1;
	overflow-y: auto;
	padding: 0 40rpx 40rpx;
}

.picker-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #F0F0F0;
	display: flex;
	flex-direction: column;
}

.picker-item:last-child {
	border-bottom: none;
}

.elderly-name, .task-name {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 8rpx;
}

.elderly-info {
	font-size: 26rpx;
	color: #666666;
}
</style> 